
<template>
  <div class="total-user">
    <img class="bg" src="../../assets/img/dp/icon0611.png" alt="骑手">
    <div class="car">
      <img src="../../assets/img/dp/lun.png" alt=""  class="icon icon03">
      <img src="../../assets/img/dp/lun.png" alt=""  class="icon icon03_1">
      <img src="../../assets/img/dp/icon07.png" class="icon icon07" alt="">
    </div>
    <div class="km">
      <AnimatedNumber :value="56782457" :round="1" :format="formatToPrice" /><span class="sp">KM</span>
    </div>
  </div>
</template>

<script>
import { currentGET } from 'api/modules'
import * as API from '@/api'
import AnimatedNumber from "animated-number-vue";
export default {
  data() {
    return {
       options: {},
      countBateryNumData: {
        risk: 0,
        store:0,
        use: 0
      },
      pageflag: true,
      timer: null,
      autoTime: 6 * 60 * 1000
    };
  },
  components: {
    AnimatedNumber
  },
  created() {
    this.getData()

  },
  computed: {
  },
  mounted() {
    this.switper()
  },
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },

    getData() {
      this.pageflag = true

      
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.autoTime);
     
    },
    
  },
  formatToPrice(value) {
    return `${value.toFixed(2)}`;
  }
};
</script>
<style lang='scss' scoped>
.total-user {
  width: 100%;
  height: 100%;
  position: relative;
  .bg {
    width: 100%;
    height: 97%;
    object-fit: contain;
  }
  .km {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    font-size: 66px;
    color: #fff;
    font-weight: 700;
    font-family: "DS-Digital";
    .sp {
      font-size: 20px;
      margin-left: 10PX;
      font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
  }
  .car {
    position: absolute;
    width: 117px;
    height: 78px;
    bottom: 0;
    left: 0px;
    animation: carAnimation-3d65dcbb 6s infinite 
      ease-in-out;
  }
  .icon {
    position: absolute;
  }

  .icon07 {
    bottom: 0;
    left: 0;
  }
  .icon03 {
    bottom: 0;
    left: 23px;
    animation: rotate-3d65dcbb 1s infinite 
linear;
  }

  .icon03_1 {
    bottom: 0;
    left: 88px;
    animation: rotate-3d65dcbb 1s infinite 
linear;
  }
}

@keyframes rotate-3d65dcbb {
  0% {
    transform: rotate(0);
  }
 
  100% {
    transform: rotate(360deg);
  }
}

@keyframes carAnimation-3d65dcbb {
  0% {
    opacity: 0;
    left: -117px;
  }
  50% {
     opacity: 1;
  }

  100% {
    opacity: 0;
    left: 420px;
  }
}
</style>
